export default function MakePage() {
  return (
    <div className="flex justify-center p-4 bg-gray-100 min-h-screen">
      <div className="scale-[0.7] sm:scale-[0.8] md:scale-[0.75] origin-top transition-transform">
        <div className="w-[210mm] h-[297mm] mx-auto bg-white shadow-md p-[20mm]">
          {/* 头部信息 */}
          <header className="mb-8">
            <h1 className="text-3xl font-bold">张三</h1>
            <p className="text-gray-600">
              前端开发工程师 | zhang.san@example.com | 138-1234-5678
            </p>
          </header>

          {/* 教育背景 */}
          <section className="mb-6">
            <h2 className="text-xl font-semibold border-b border-gray-300 pb-1 mb-3">
              教育背景
            </h2>
            <div className="mb-4">
              <h3 className="text-lg font-medium">清华大学</h3>
              <p className="text-gray-600">计算机科学与技术 | 2015-2019</p>
            </div>
          </section>

          {/* 工作经历 */}
          <section className="mb-6">
            <h2 className="text-xl font-semibold border-b border-gray-300 pb-1 mb-3">
              工作经历
            </h2>
            <div className="mb-4">
              <h3 className="text-lg font-medium">ABC科技有限公司</h3>
              <p className="text-gray-600">高级前端开发工程师 | 2020-至今</p>
              <ul className="list-disc pl-5 mt-2 space-y-1">
                <li>负责公司核心产品的前端架构设计和开发</li>
                <li>带领5人前端团队完成多个重大项目</li>
              </ul>
            </div>
          </section>

          {/* 技能 */}
          <section>
            <h2 className="text-xl font-semibold border-b border-gray-300 pb-1 mb-3">
              技能
            </h2>
            <div className="flex flex-wrap gap-2">
              <span className="px-3 py-1 bg-gray-100 rounded-full">React</span>
              <span className="px-3 py-1 bg-gray-100 rounded-full">
                JavaScript/TypeScript
              </span>
              <span className="px-3 py-1 bg-gray-100 rounded-full">
                HTML5/CSS3
              </span>
              <span className="px-3 py-1 bg-gray-100 rounded-full">
                Node.js
              </span>
            </div>
          </section>
        </div>
      </div>
    </div>
  )
}
